<template>
  <div class="lianxi_four">
    <m-header modile-title="练习4" go-back="true"></m-header>
    <!--图片预览-->
    <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" @click="show(index)">
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
    <!--图片懒加载-->
    <div v-for="src in lists" style="text-align:center;">
      <span style="text-align: center">
          <inline-loading></inline-loading>
      </span>
      <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
    </div>
  </div>
</template>
<style lang="scss">
  .lianxi_four {
    width: 100%;
    padding-top: 60px;
    .ximg-demo {
      width: 100%;
      height: auto;
    }
    .ximg-error {
      background-color: yellow;
    }
    .ximg-error:after {
      content: '加载失败';
      color: red;
    }
  }

</style>
<script>
  import mHeader from '../../../../components/header'
  import {Previewer, TransferDom, XImg,InlineLoading } from 'vux'

  export default {
    data() {
      return {
        list: [ // 数组里面每一个元素有一个宽高的变量，用来表示放大预览时图片的大小 w \ h
          {
            msrc: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1445830749,1757055224&fm=175&app=25&f=JPEG?w=640&h=357&s=7E383EC7631061D680E68D780300D03B',
            src: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1445830749,1757055224&fm=175&app=25&f=JPEG?w=640&h=357&s=7E383EC7631061D680E68D780300D03B'
          },
          {
            msrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1200286645,3569425516&fm=175&app=25&f=JPEG?w=640&h=427&s=6980CC1954A31AA83E0DCDF5030060A3',
            src: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1200286645,3569425516&fm=175&app=25&f=JPEG?w=640&h=427&s=6980CC1954A31AA83E0DCDF5030060A3'
          },{
            msrc: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1964505158,905637270&fm=175&app=25&f=JPEG?w=640&h=427&s=C0E4ABE6D64164F5BC1C2CBE03001050',
            src: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1964505158,905637270&fm=175&app=25&f=JPEG?w=640&h=427&s=C0E4ABE6D64164F5BC1C2CBE03001050'
          }],
        lists: [
          'https://o5omsejde.qnssl.com/demo/test1.jpg',
          'https://o5omsejde.qnssl.com/demo/test2.jpg',
          'https://o5omsejde.qnssl.com/demo/test4.jpg',
          'https://o5omsejde.qnssl.com/demo/test5.jpg',
          'https://o5omsejde.qnssl.com/demo/test6.jpg',
          'https://o5omsejde.qnssl.com/demo/test7.jpg',
          'https://o5omsejde.qnssl.com/demo/test8.jpg'
        ],
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index] // 获取图片标签
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // 获取滚动条的位置
            let rect = thumbnail.getBoundingClientRect() // 获取元素位置
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }
      }
    },
    directives: { // directives : 表示自定义组件
      TransferDom // 占位符
    },
    methods: {
      logIndexChange(arg) {
        console.log(arg) // 滑动打印数据下标
      },
      show(index) {
        this.$refs.previewer.show(index)
      },
      // 预览成功后显示的地址
      success (src, ele) {
        console.log('success load', src)
        const span = ele.parentNode.querySelector('span')
        ele.parentNode.removeChild(span)
      },
      //预览失败后显示的地址
      error (src, ele, msg) {
        console.log('error load', msg, src)
        const span = ele.parentNode.querySelector('span')
        span.innerText = 'load error'
      }
    },
    components: {
      mHeader,
      Previewer,
      XImg,
      InlineLoading
    }
  }
</script>
